<template>
    <el-drawer
        :title="sendType == '3' ? '选择教师' : '选择学生'"
        :visible.sync="drawer"
        :direction="'btt'"
        class="selectUserContent"
        :size="650"
        :before-close="handleClose">
        <el-row style="margin: 0;" :gutter="20">
            <!--部门数据-->
            <el-col :span="4" class="treeBox" :xs="24">
                <TreeIndex :deptOptions="deptOptions" @handleNode="handleNodeClick" :title="'部门信息'"></TreeIndex>
            </el-col>
            <el-col :span="20" :xs="24">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane :label="sendType == '3' ? '教师列表' : '学生列表'" name="allList">
                        <el-table
                            :data="allTableData"
                            ref="multipleTable"
                            @select="rowSelect"
                            @select-all="selectAll"
                            style="width: 100%"
                            height="440"
                            >
                            <el-table-column type="selection" width="55" align="center" />
                            <el-table-column
                                v-for="item in tableColumn"
                                :key="item.prop"
                                :prop="item.prop"
                                :label="item.label"
                                :show-overflow-tooltip="true"
                                :align="'center'"
                            >
                                <!-- <template v-if="item.prop=='sex'" slot-scope="scope">
                                    <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"></dict-tag>
                                </template>
                                <template v-if="item.prop=='studentType'" slot-scope="scope">
                                    <dict-tag :options="dict.type.bc_student_type" :value="scope.row.studentType"></dict-tag>
                                </template> -->
                            </el-table-column>
                        </el-table>
                        <pagination
                            v-show="total > 0"
                            :total="total"
                            :page.sync="queryParams.pageNum"
                            :limit.sync="queryParams.pageSize"
                            @pagination="getList"
                            />
                    </el-tab-pane>
                    <el-tab-pane label="已选择" name="haveList">
                        <span slot="label">
                            <el-badge :value="haveTableData.length" class="badgeItem" :hidden="!haveTableData.length" :type="'primary'">
                                已选择
                            </el-badge>
                        </span>
                        <el-table
                            :data="haveTableData"
                            style="width: 100%"
                            height="440"
                            >
                            <el-table-column
                                v-for="item in tableColumn"
                                :key="item.prop"
                                :prop="item.prop"
                                :label="item.label"
                                :show-overflow-tooltip="true"
                                :align="'center'"
                            ></el-table-column>
                            <el-table-column label="操作" :align="'center'">
                                <template slot-scope="scope">
                                    <el-button
                                        size="mini"
                                        type="text"
                                        @click="removeSelect(scope.row)"
                                    >移除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </el-drawer>
</template>

<script>
import TreeIndex from "@/components/tree/index.vue";
import { deptTreeSelect } from "@/api/system/user";
import {
  teacherList
} from "@/api/information/teacherInfor";
import {
  studentList,
} from "@/api/information/studentInfor";
export default {
    name: 'selectUser',
    components: { 
        TreeIndex
    },
    props:{
        sendType:{
            type: String,
            default: ''
        },
        sendUserIds:{
            type: Array,
            default: []
        }
    },
    data () {
        return {
            drawer: false,
            deptOptions: [],
            activeName: 'allList',
            studentColumn:[{
                prop: 'registerCode',
                label: '注册号'
            },{
                prop: 'sno',
                label: '学号'
            },{
                prop: 'name',
                label: '姓名'
            },{
                prop: 'sex',
                label: '性别'
            },{
                prop: 'deptNames',
                label: '所在院部'
            },{
                prop: 'specialityName',
                label: '专业'
            },{
                prop: 'className',
                label: '班级'
            },{
                prop: 'studentType',
                label: '学生类型'
            },],
            teacherColumn:[{
                prop: 'tno',
                label: '工号'
            },{
                prop: 'name',
                label: '姓名'
            },{
                prop: 'deptNames',
                label: '单位名称'
            },{
                prop: 'sex',
                label: '性别'
            },{
                prop: 'birthday',
                label: '出生年月'
            },],
            tableColumn:[],
            allTableData: [],
            haveTableData: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                deptId: ""
            },
            total: 0
        }
    },
    created() {
        this.department();
    },
    methods: {
        removeSelect (rowData) {
            this.haveTableData = this.haveTableData.filter((item) => {
                return rowData.userId != item.userId
            })
        },
        open () {
            this.drawer = true
            if (this.sendType == '3') {
                this.tableColumn = this.teacherColumn
            } else {
                this.tableColumn = this.studentColumn
            }
            this.getList()
        },
        initData () {
            this.activeName = 'allList'
            this.tableColumn = []
            this.allTableData = []
            this.haveTableData = []
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                deptId: ""
            }
            this.total = 0
        },
        handleClose(done) {
            const userIds = this.haveTableData.map((item) => {return item.userId})
            this.$emit("update:sendUserIds", userIds)
            done();
        },
        handleClick (tab, event) {
            if (this.activeName == 'allList') {
                this.toggleSelection(this.allTableData)
            }
        },
        rowSelect (selection, row) {
            if (selection.length) {
                if (!this.haveTableData.some((item) => {return item.userId == row.userId})) {
                    this.haveTableData.push(row)
                }
            } else {
                this.haveTableData = this.haveTableData.filter((item) => {
                    return row.userId != item.userId
                })
            }
        },
        selectAll (selection) {
            if (selection.length) {
                selection.forEach((row)=>{
                    this.rowSelect([row], row)
                })
            } else {
                this.haveTableData = this.haveTableData.filter((item) => {
                    return !this.allTableData.some((row) => { return row.userId == item.userId})
                })
            }
        },
        getTeacherList(){
            teacherList(this.queryParams).then(response => {
                this.allTableData = response.rows;
                this.total = response.total;
                this.toggleSelection(response.rows)
            });
        },
        getStudentList(){
            studentList(this.queryParams).then(response => {
                this.allTableData = response.rows;
                this.total = response.total;
                this.toggleSelection(response.rows)
            });
        },
        getList() {
            if (this.sendType == '3') {
                this.getTeacherList()
            } else {
                this.getStudentList()
            }
        },
        toggleSelection(rows) {
            this.$nextTick(() => {
                this.$refs.multipleTable.clearSelection();
                if (rows) {
                    rows.forEach(row => {
                        if (this.haveTableData.some((haveRow) => {return row.userId == haveRow.userId})) {
                            this.$refs.multipleTable.toggleRowSelection(row);
                        }
                    });
                }
            })
        },
        // 获取部门信息
        department() {
            deptTreeSelect().then(res => {
                this.deptOptions = res.data;
            });
        },
        // tree树形选中的值
        handleNodeClick(data) {
            this.queryParams.deptId = data.id
            this.getList()
        }
    }
}
</script>

<style lang="scss" scoped>
    .treeBox{
        height: 550px;
    }
    .selectUserContent{
        ::v-deep .el-drawer__header{
            margin-bottom: 5px;
        }
        ::v-deep .el-badge__content.is-fixed {
            position: absolute;
            top: 15px;
            right: 3px;
        }
    }
    ::v-deep .pagination-container{
        height: 33px;
    }
</style>